<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>02-打地鼠.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      ul {
        list-style: none;
        width: 1200px;
        display: flex;
        flex-wrap: wrap;
        margin: 0 auto;
      }

      li {
        width: 400px;
        height: 300px;

        border: 1px solid #000;

        position: relative;

        overflow: hidden;
      }

      img {
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translate(-50%, 0);
      }

      /* 泥土 */
      .dirt {
        z-index: 100;

        background-image: linear-gradient(
          to bottom,
          transparent 50%,
          #fff 50%,
          #fff 100%
        );
      }

      /* 地鼠 */
      .mole {
        transform: translate(-50%, 100%);

        transition: transform 1s;
      }

      .active {
        transform: translate(-50%, 0);
      }

      h1 {
        text-align: center;
      }

      button {
        width: 100px;
        height: 40px;
        border-radius: 20px;
        font-size: 18px;
        display: block;
        margin: 10px auto;
      }
    </style>
  </head>

  <body>
    <h1>打地鼠游戏 : <span>0</span></h1>
    <button>开始</button>
    <ul>
      <li>
        <img class="dirt" src="./images/dirt.svg" alt="" />
        <img class="mole" src="./images/mole.svg" alt="" />
      </li>
      <li>
        <img class="dirt" src="./images/dirt.svg" alt="" />
        <img class="mole" src="./images/mole.svg" alt="" />
      </li>
      <li>
        <img class="dirt" src="./images/dirt.svg" alt="" />
        <img class="mole" src="./images/mole.svg" alt="" />
      </li>
      <li>
        <img class="dirt" src="./images/dirt.svg" alt="" />
        <img class="mole" src="./images/mole.svg" alt="" />
      </li>
      <li>
        <img class="dirt" src="./images/dirt.svg" alt="" />
        <img class="mole" src="./images/mole.svg" alt="" />
      </li>
      <li>
        <img class="dirt" src="./images/dirt.svg" alt="" />
        <img class="mole" src="./images/mole.svg" alt="" />
      </li>
    </ul>
    <script>
      // 获取元素
      // 开始按钮
      const startBtn = document.querySelector("button");
      // 分数
      const span = document.querySelector("h1 span");
      // 老鼠s
      const ul = document.querySelector("ul");
      const moles = document.querySelectorAll(".mole");

      // 1、开始业务
      let flag = true;
      let num = 0;
      startBtn.addEventListener("click", () => {
        if (flag) {
          // 开启定时器
          let timer = setTimeout(function auto() {
            document.querySelector(".active") &&
              document.querySelector(".active").classList.remove("active");
            let i = Math.floor(Math.random() * 6);
            moles[i].classList.add("active");
            flag = false;
            num++;
            timer = setTimeout(auto, 1150);
            // 清除定时器
            if (num === 10) {
              clearTimeout(timer);
              document.querySelector(".active").classList.remove("active");
              flag = true;
            }
          }, 1150);
        }
      });
      // 2、点击小老鼠业务
      let result = 0;
      ul.addEventListener("click", (e) => {
        if (e.target.classList.contains("active")) {
          span.innerHTML = result++;
        }
      });
    </script>
  </body>
</html>
